/****************************************/
/* 重置样式 */
/****************************************/
html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    /* Arial 只能识别英文 */
    /* Windows 默认是字体，这里设置成微软雅黑 */
    /* sans-serif 是无衬线字体，是一类字体 */
    /* 没有设置 Mac 系统，默认就好 */
    font: 16px Arial, "Microsoft YaHei", sans-serif;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
    font-weight: bold;
}

i {
    font-style: italic;
}

a {
    text-decoration: none;
}



/****************************************/
/* 工具类 */
/****************************************/



/****************************************/
/* 组件 */
/****************************************/

/********************/
/* 网格系统 */
/********************/

/* 容器 */
.container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        width: 748px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 972px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1180px;
    }
}

/* 清浮动 */
.container::after,
.container-fluid::after,
.row::after {
  display: table;
  clear: both;
  content: "";
}

/* 宽度 100% 的容器 */
.container-fluid {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}

/* 行 */
.row {
    margin-left: -10px;
    margin-right: -10px;
}

/* 列 */
.col-s-1,
.col-s-2,
.col-s-3,
.col-s-4,
.col-s-5,
.col-s-6,
.col-s-7,
.col-s-8,
.col-s-9,
.col-s-10,
.col-s-11,
.col-s-12 {
    float: left;
    position: relative;
}
.col-s-1 {
    width: 8.333333%;
}
.col-s-2 {
    width: 16.666667%;
}
.col-s-3 {
    width: 25%;
}
.col-s-4 {
    width: 33.333333%;
}
.col-s-5 {
    width: 41.666667%;
}
.col-s-6 {
    width: 50%;
}
.col-s-7 {
    width: 58.333333%;
}
.col-s-8 {
    width: 66.666667%;
}
.col-s-9 {
    width: 75%;
}
.col-s-10 {
    width: 83.333333%;
}
.col-s-11 {
    width: 91.666667%;
}
.col-s-12 {
    width: 100%;
}

.col-s-pull-1 {
    right: 8.333333%;
}
.col-s-pull-2 {
    right: 16.666667%;
}
.col-s-pull-3 {
    right: 25%;
}
.col-s-pull-4 {
    right: 33.333333%;
}
.col-s-pull-5 {
    right: 41.666667%;
}
.col-s-pull-6 {
    right: 50%;
}
.col-s-pull-7 {
    right: 58.333333%;
}
.col-s-pull-8 {
    right: 66.666667%;
}
.col-s-pull-9 {
    right: 75%;
}
.col-s-pull-10 {
    right: 83.333333%;
}
.col-s-pull-11 {
    right: 91.666667%;
}
.col-s-pull-12 {
    right: 100%;
}

.col-s-push-1 {
    left: 8.333333%;
}
.col-s-push-2 {
    left: 16.666667%;
}
.col-s-push-3 {
    left: 25%;
}
.col-s-push-4 {
    left: 33.333333%;
}
.col-s-push-5 {
    left: 41.666667%;
}
.col-s-push-6 {
    left: 50%;
}
.col-s-push-7 {
    left: 58.333333%;
}
.col-s-push-8 {
    left: 66.666667%;
}
.col-s-push-9 {
    left: 75%;
}
.col-s-push-10 {
    left: 83.333333%;
}
.col-s-push-11 {
    left: 91.666667%;
}
.col-s-push-12 {
    left: 100%;
}

.col-s-offset-1 {
    margin-left: 8.333333%;
}
.col-s-offset-2 {
    margin-left: 16.666667%;
}
.col-s-offset-3 {
    margin-left: 25%;
}
.col-s-offset-4 {
    margin-left: 33.333333%;
}
.col-s-offset-5 {
    margin-left: 41.666667%;
}
.col-s-offset-6 {
    margin-left: 50%;
}
.col-s-offset-7 {
    margin-left: 58.333333%;
}
.col-s-offset-8 {
    margin-left: 66.666667%;
}
.col-s-offset-9 {
    margin-left: 75%;
}
.col-s-offset-10 {
    margin-left: 83.333333%;
}
.col-s-offset-11 {
    margin-left: 91.666667%;
}
.col-s-offset-12 {
    margin-left: 100%;
}

@media (min-width: 768px) {
    /* 列 */
    .col-m-1,
    .col-m-2,
    .col-m-3,
    .col-m-4,
    .col-m-5,
    .col-m-6,
    .col-m-7,
    .col-m-8,
    .col-m-9,
    .col-m-10,
    .col-m-11,
    .col-m-12 {
        float: left;
        position: relative;
    }
    .col-m-1 {
        width: 8.333333%;
    }
    .col-m-2 {
        width: 16.666667%;
    }
    .col-m-3 {
        width: 25%;
    }
    .col-m-4 {
        width: 33.333333%;
    }
    .col-m-5 {
        width: 41.666667%;
    }
    .col-m-6 {
        width: 50%;
    }
    .col-m-7 {
        width: 58.333333%;
    }
    .col-m-8 {
        width: 66.666667%;
    }
    .col-m-9 {
        width: 75%;
    }
    .col-m-10 {
        width: 83.333333%;
    }
    .col-m-11 {
        width: 91.666667%;
    }
    .col-m-12 {
        width: 100%;
    }
    
    .col-m-pull-1 {
        right: 8.333333%;
    }
    .col-m-pull-2 {
        right: 16.666667%;
    }
    .col-m-pull-3 {
        right: 25%;
    }
    .col-m-pull-4 {
        right: 33.333333%;
    }
    .col-m-pull-5 {
        right: 41.666667%;
    }
    .col-m-pull-6 {
        right: 50%;
    }
    .col-m-pull-7 {
        right: 58.333333%;
    }
    .col-m-pull-8 {
        right: 66.666667%;
    }
    .col-m-pull-9 {
        right: 75%;
    }
    .col-m-pull-10 {
        right: 83.333333%;
    }
    .col-m-pull-11 {
        right: 91.666667%;
    }
    .col-m-pull-12 {
        right: 100%;
    }
    
    .col-m-push-1 {
        left: 8.333333%;
    }
    .col-m-push-2 {
        left: 16.666667%;
    }
    .col-m-push-3 {
        left: 25%;
    }
    .col-m-push-4 {
        left: 33.333333%;
    }
    .col-m-push-5 {
        left: 41.666667%;
    }
    .col-m-push-6 {
        left: 50%;
    }
    .col-m-push-7 {
        left: 58.333333%;
    }
    .col-m-push-8 {
        left: 66.666667%;
    }
    .col-m-push-9 {
        left: 75%;
    }
    .col-m-push-10 {
        left: 83.333333%;
    }
    .col-m-push-11 {
        left: 91.666667%;
    }
    .col-m-push-12 {
        left: 100%;
    }
    
    .col-m-offset-1 {
        margin-left: 8.333333%;
    }
    .col-m-offset-2 {
        margin-left: 16.666667%;
    }
    .col-m-offset-3 {
        margin-left: 25%;
    }
    .col-m-offset-4 {
        margin-left: 33.333333%;
    }
    .col-m-offset-5 {
        margin-left: 41.666667%;
    }
    .col-m-offset-6 {
        margin-left: 50%;
    }
    .col-m-offset-7 {
        margin-left: 58.333333%;
    }
    .col-m-offset-8 {
        margin-left: 66.666667%;
    }
    .col-m-offset-9 {
        margin-left: 75%;
    }
    .col-m-offset-10 {
        margin-left: 83.333333%;
    }
    .col-m-offset-11 {
        margin-left: 91.666667%;
    }
    .col-m-offset-12 {
        margin-left: 100%;
    }
}
@media (min-width: 992px) {
    /* 列 */
    .col-l-1,
    .col-l-2,
    .col-l-3,
    .col-l-4,
    .col-l-5,
    .col-l-6,
    .col-l-7,
    .col-l-8,
    .col-l-9,
    .col-l-10,
    .col-l-11,
    .col-l-12 {
        float: left;
        position: relative;
    }
    .col-l-1 {
        width: 8.333333%;
    }
    .col-l-2 {
        width: 16.666667%;
    }
    .col-l-3 {
        width: 25%;
    }
    .col-l-4 {
        width: 33.333333%;
    }
    .col-l-5 {
        width: 41.666667%;
    }
    .col-l-6 {
        width: 50%;
    }
    .col-l-7 {
        width: 58.333333%;
    }
    .col-l-8 {
        width: 66.666667%;
    }
    .col-l-9 {
        width: 75%;
    }
    .col-l-10 {
        width: 83.333333%;
    }
    .col-l-11 {
        width: 91.666667%;
    }
    .col-l-12 {
        width: 100%;
    }
    
    .col-l-pull-1 {
        right: 8.333333%;
    }
    .col-l-pull-2 {
        right: 16.666667%;
    }
    .col-l-pull-3 {
        right: 25%;
    }
    .col-l-pull-4 {
        right: 33.333333%;
    }
    .col-l-pull-5 {
        right: 41.666667%;
    }
    .col-l-pull-6 {
        right: 50%;
    }
    .col-l-pull-7 {
        right: 58.333333%;
    }
    .col-l-pull-8 {
        right: 66.666667%;
    }
    .col-l-pull-9 {
        right: 75%;
    }
    .col-l-pull-10 {
        right: 83.333333%;
    }
    .col-l-pull-11 {
        right: 91.666667%;
    }
    .col-l-pull-12 {
        right: 100%;
    }
    
    .col-l-push-1 {
        left: 8.333333%;
    }
    .col-l-push-2 {
        left: 16.666667%;
    }
    .col-l-push-3 {
        left: 25%;
    }
    .col-l-push-4 {
        left: 33.333333%;
    }
    .col-l-push-5 {
        left: 41.666667%;
    }
    .col-l-push-6 {
        left: 50%;
    }
    .col-l-push-7 {
        left: 58.333333%;
    }
    .col-l-push-8 {
        left: 66.666667%;
    }
    .col-l-push-9 {
        left: 75%;
    }
    .col-l-push-10 {
        left: 83.333333%;
    }
    .col-l-push-11 {
        left: 91.666667%;
    }
    .col-l-push-12 {
        left: 100%;
    }
    
    .col-l-offset-1 {
        margin-left: 8.333333%;
    }
    .col-l-offset-2 {
        margin-left: 16.666667%;
    }
    .col-l-offset-3 {
        margin-left: 25%;
    }
    .col-l-offset-4 {
        margin-left: 33.333333%;
    }
    .col-l-offset-5 {
        margin-left: 41.666667%;
    }
    .col-l-offset-6 {
        margin-left: 50%;
    }
    .col-l-offset-7 {
        margin-left: 58.333333%;
    }
    .col-l-offset-8 {
        margin-left: 66.666667%;
    }
    .col-l-offset-9 {
        margin-left: 75%;
    }
    .col-l-offset-10 {
        margin-left: 83.333333%;
    }
    .col-l-offset-11 {
        margin-left: 91.666667%;
    }
    .col-l-offset-12 {
        margin-left: 100%;
    }
}
@media (min-width: 1200px) {
    /* 列 */
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12 {
        float: left;
        position: relative;
    }
    .col-xl-1 {
        width: 8.333333%;
    }
    .col-xl-2 {
        width: 16.666667%;
    }
    .col-xl-3 {
        width: 25%;
    }
    .col-xl-4 {
        width: 33.333333%;
    }
    .col-xl-5 {
        width: 41.666667%;
    }
    .col-xl-6 {
        width: 50%;
    }
    .col-xl-7 {
        width: 58.333333%;
    }
    .col-xl-8 {
        width: 66.666667%;
    }
    .col-xl-9 {
        width: 75%;
    }
    .col-xl-10 {
        width: 83.333333%;
    }
    .col-xl-11 {
        width: 91.666667%;
    }
    .col-xl-12 {
        width: 100%;
    }
    
    .col-xl-pull-1 {
        right: 8.333333%;
    }
    .col-xl-pull-2 {
        right: 16.666667%;
    }
    .col-xl-pull-3 {
        right: 25%;
    }
    .col-xl-pull-4 {
        right: 33.333333%;
    }
    .col-xl-pull-5 {
        right: 41.666667%;
    }
    .col-xl-pull-6 {
        right: 50%;
    }
    .col-xl-pull-7 {
        right: 58.333333%;
    }
    .col-xl-pull-8 {
        right: 66.666667%;
    }
    .col-xl-pull-9 {
        right: 75%;
    }
    .col-xl-pull-10 {
        right: 83.333333%;
    }
    .col-xl-pull-11 {
        right: 91.666667%;
    }
    .col-xl-pull-12 {
        right: 100%;
    }
    
    .col-xl-push-1 {
        left: 8.333333%;
    }
    .col-xl-push-2 {
        left: 16.666667%;
    }
    .col-xl-push-3 {
        left: 25%;
    }
    .col-xl-push-4 {
        left: 33.333333%;
    }
    .col-xl-push-5 {
        left: 41.666667%;
    }
    .col-xl-push-6 {
        left: 50%;
    }
    .col-xl-push-7 {
        left: 58.333333%;
    }
    .col-xl-push-8 {
        left: 66.666667%;
    }
    .col-xl-push-9 {
        left: 75%;
    }
    .col-xl-push-10 {
        left: 83.333333%;
    }
    .col-xl-push-11 {
        left: 91.666667%;
    }
    .col-xl-push-12 {
        left: 100%;
    }
    
    .col-xl-offset-1 {
        margin-left: 8.333333%;
    }
    .col-xl-offset-2 {
        margin-left: 16.666667%;
    }
    .col-xl-offset-3 {
        margin-left: 25%;
    }
    .col-xl-offset-4 {
        margin-left: 33.333333%;
    }
    .col-xl-offset-5 {
        margin-left: 41.666667%;
    }
    .col-xl-offset-6 {
        margin-left: 50%;
    }
    .col-xl-offset-7 {
        margin-left: 58.333333%;
    }
    .col-xl-offset-8 {
        margin-left: 66.666667%;
    }
    .col-xl-offset-9 {
        margin-left: 75%;
    }
    .col-xl-offset-10 {
        margin-left: 83.333333%;
    }
    .col-xl-offset-11 {
        margin-left: 91.666667%;
    }
    .col-xl-offset-12 {
        margin-left: 100%;
    }
}